<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>04_class与style绑定</title>
  </head>
  <body>
    <!--
      1. 理解
        在应用界面中, 某个(些)元素的样式是变化的
        class/style绑定就是专门用来实现动态样式效果的技术
      2. class绑定: :class='xxx'
        xxx是字符串
        xxx是对象
        xxx是数组
      3. style绑定
        :style="{ color: activeColor, fontSize: fontSize + 'px' }"
        其中activeColor/fontSize是data属性
      -->

    <div id="app">
      <h2>1. class绑定: :class='xxx'</h2>
      <p>这是一段文字~</p>
      <button>改变颜色</button>

      <h2>2. style绑定</h2>
      <p>这是一段文字~</p>
      <input type="text" placeholder="请输入字体大小" />
    </div>

    <script src="../js/vue.js"></script>
    <script></script>
  </body>
</html>
